<template>
    <div class="top-bar">
        <div class="left"><span class="iconfont icon-live"></span></div>
        <div class="middle">
            <div @click="goIndex(0)"><span :class="barIndex===0 ?'active':''">同城</span></div>
            <div @click="goIndex(1)"><span :class="barIndex===1 ?'active':''">关注</span></div>
            <div @click="goIndex(2)"><span :class="barIndex===2 ?'active':''">推荐</span></div>
        </div>
        <div class="right"><span class="iconfont icon-search"></span></div>
    </div>
</template>

<script>
export default {
    name:"TopBar",
    data(){
        return{
            barIndex:2,
            
        }
    },
    methods:{
        // 定义顶部导航栏跳转事件
        goIndex(index){
            this.barIndex = index
            console.log(index);
            
        }
    }
}
</script>

<style lang="less" scopeds>
    .top-bar{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 60px;
        // background-color: #000;
        color: #ccc;
        font-size: 20px;
        justify-content: center;
        align-items: center;
        z-index: 999;
        text-align: center;
        .iconfont{
            font-size:25px;
        }
        .left,.right{
            width: 20%;
        }
        .middle{
            box-sizing: border-box;
            display: flex;
            width: 60%;
            justify-content: center;
            align-items: center;
            span{
                text-align: center;
                padding: 10px;
                flex: 1;
                
            }
            
        }
    }
    // 被选中的功能
    .active{
        border-bottom:5px solid #fff ;
    }

</style>